<template>
  <van-popup
    v-model="show"
    position="left"
    class="fa"
    :style="{ height: '100%', width: '100%' }"
  >
    <div>
      <van-nav-bar
        title="我的报价"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="client">
        <van-field
          label="客户名称："
          v-model="entity.CustomerName"
          readonly
          placeholder="请选择客户"
          right-icon="edit"
          @click-right-icon="CustomerChoice"
        >
          <!-- <van-button
            @click="CustomerChoice"
            slot="button"
            size="small"
            type="primary"
            >选择客户</van-button
          > -->
        </van-field>
      </div>
      <div class="scrollBar">
        <div class="box" v-for="item in data" :key="item.Id">
          <div>品名:{{ item.ProductId }}/{{ item.cInvName }}</div>
          <van-divider />
          <div>规格型号:{{ item.cInvStd }}</div>
          <van-divider />
          <div class="Father">
            <van-field
              label="数量:"
              v-model="item.ProductIdNum"
              placeholder="请输入数量"
            />
            <van-field
              label="税率%:"
              v-model="item.TaxRate"
              placeholder="请输入税率"
            />
            <van-field
              label="含税价格:"
              v-model="item.Tax_Included_Price"
              placeholder="请输入含税价格"
            />
          </div>
        </div>
      </div>
    </div>
    <Myuser @customerChoice="Client" ref="myuser" />
    <Product @Product="Product" ref="product" />
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <van-button @click="Add" slot="button" type="info">添加</van-button>
      <van-button @click="close" slot="button" type="default">关闭</van-button>
      <van-button @click="handleSubmit" slot="button" type="primary"
        >保存</van-button
      >
    </div>
  </van-popup>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import { Row, Col, Cell, CellGroup, Toast, NavBar, Divider } from "vant";
import { Field } from "vant";
//客户
import Myuser from "@/components/OwnUser.vue";
import Product from "../../components/Product.vue";
export default {
  components: {
    //分割线
    "van-divider": Divider,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    Myuser,
    Product
  },
  data() {
    return {
      entity: {},
      data: [],
      show: false,
      Id: ""
    };
  },
  methods: {
    //返回
    onClickLeft() {
      this.show = false;
    },
    //选中的产品
    Product(a) {
      console.log(a, "选择产品信息");

      this.data.push({
        ProductId: a.cInvCode,
        cInvName: a.cInvName,
        cInvCode: a.cInvCode,
        cInvStd: a.cInvStd
      });
    },
    // 选择产品;
    Add() {
      this.$refs.product.openForm(this.entity.PriceListId);
    },
    close() {
      this.show = false;
    },
    Client(a) {
      console.log(a);
      this.$set(this.entity, "CustomerName", a.cCusName);

      this.entity.CustomerId = a.cCusCode;
    },
    //选择客户
    CustomerChoice() {
      this.$refs.myuser.openForm();
    },
    getDataList() {
      this.http
        .post("/QuotationManagement/Quot_OfferSheetMain/GetTheDataOfAll", {
          // PageIndex: this.pagination.current,
          // PageRows: this.pagination.pageSize,
          SortField: "Id",
          SortType: "desc",
          Search: {
            Condition: "Id",
            Keyword: this.Id
          }
        })
        .then(res => {
          if (res.Success) {
            this.entity = res.Data;
            this.data = res.Data.QOSD_List;
          } else {
            Toast(res.Msg);
          }
        });
    },
    init() {
      this.show = true;
      (this.data = []), (this.entity = {});
    },
    handleSubmit() {
      var entityData = { ...this.entity };
      var QOSD_List = [...this.data];
      entityData.QOSD_List = QOSD_List;
      this.http
        .post("/QuotationManagement/Quot_OfferSheetMain/SaveData", entityData)
        .then(resJson => {
          console.log(resJson);

          if (resJson.Success) {
            Toast(resJson.Msg);
            this.show = false;

            console.log(this.$parent);
            this.$parent.getDataList();
          } else {
            Toast(resJson.Msg);
          }
        });
    },
    openForm(Id) {
      this.init();
      if (Id) {
        this.Id = Id;
        this.getDataList();
      }
    }
  }
};
</script>

<style>
.scrollBar {
  height: 550px;
  overflow: auto;
}
.close {
  position: "absolute";

  right: 0;
  bottom: 0;
  padding: "5px 16px";
  background: "#fff";
  text-align: right;
  z-index: 1;
}
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.box {
  width: 80%;
  height: 200px;
  overflow: auto;
  margin: 0 auto;

  border: 1px solid #ccc;
  /* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 10px 10px; */

  margin-top: 20px;
  margin-bottom: 10px;
}
/* .Father {
  display: flex;
} */
</style>
